// 声明一个path
const path =require("path");
// 这个是引用那个自动生成html的包的
const HtmlWebpackPlugin=require("html-webpack-plugin");
const CopyWebpackPlugin =require("copy-webpack-plugin")
module.exports={
   //入口配置   地址写的是绝对路径
    entry:path.resolve(__dirname,"../src/index.js"),
    // 配置出口对象   路径也写一个绝对路径  ../build这个是跳出来取的一个名字
    output:{
        path:path.resolve(__dirname,"../build"),
        // 配置出口打包好的那个文件  参照的是出口文件main.js这个也是取的一个名字
        filename:"./js/main.js"
    },
    // loader的配置
    module:{
        rules:[
              // 我们刚开始路由中的渲染的是html类型，需要使用html-loader
            {
            test:/\.html$/i,
            use:[
                'html-loader'
        ]

        }]
    },
     
    
    // 插件的配置plugin后面是数组
    plugins:[
        // 生成html文件 并设置对应的参照模板
        new HtmlWebpackPlugin({
        // 路径写绝对路径
            template:path.resolve(__dirname,"../public/index.html")
        }),
        //复制pubilc文件到打包的目录，忽略index.html
        new CopyWebpackPlugin({
            patterns:[{
            //从哪一个目录打包到哪一个目录去
            //因为我不知道他参照谁所以路径要这样写
            from:path.resolve(__dirname,"../public"),
        //to参照的是出口文件所以能取到
            to:"public",
            globOptions: {
                ignore: ["**/index.html"]
                }
            }],
        })
    ],
    resolve:{
    //配置路径别名  $v别名的名称
    alias:{
        $v:path.resolve(__dirname,"../src/views")
    } 
    },


    //  这个是说运行时默认的是生产环境
    mode:"production"
}